<template>
	<view>
		<view class="inpbox">
			<input type="text" placeholder="请输入单词"/>
		</view>
		<view class="inpbox">
			<textarea placeholder="请输入笔记" style="height: 10vh;"/>
		</view>
		<view class="inpbox">
			<textarea placeholder="请输入释义" style="height: 10vh;"/>
		</view>
		<view class="inpbox">
			<view class="action">
				选择分组
			</view>
			<view class="fzbox">
				<view :class="xz == item.groupId ? 'xz xzblue' : 'xz'" v-for="(item,index) in list" :key="item.groupName" @click = "xzfz(item)">{{item.groupName}}</view>
			</view>
		</view>
		<view class="but">
			<button class="but1">+添加</button>
		</view>
	</view>
</template>

<script>
	import {groupList} from "../../utils/fenzu.js"
	export default {
		data() {
			return {
				xz:1,
				list:[]
			}
		},
		onLoad() {
			this.fenzu()
		},
		methods: {
			xzfz(item){
				console.log(item)
				this.xz = item.groupId
			},
			async fenzu(){
				let id = this.$store.state.user.id
				console.log(id)
				if(id){
					const {data:res} = await groupList(id)
					console.log(res.data)
					this.list = res.data
					this.xz = res.data[0].groupId
				}
			},
		}
	}
</script>

<style scoped>
	.inpbox{
		background-color: #FFFFFF;
		padding: 10px;
		margin: 10px 15px;
		border-radius: 5px;
	}
	.but{
		margin: 10px 15px;
	}
	.fzbox{
		display: flex;
		flex-wrap: wrap;
	}
	.xz{
		margin: 10px;
		height: 30px;
		width: 80px;
		color: #999;
		box-sizing: content-box;
		padding: 0 20px;
		border: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
	}
	.xzblue{
		border: #3F9D83 1px solid;
		background-color: #F3F9FF;
		color: #3F9D83;
	}
	.but1{
		background-color: #3F9D83;
		color: #FFFFFF;
	}
</style>
